//--------------------tools-------------------------
;(function () {
	var Tools = {
		getRandom: function (min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
	}
	window.Tools = Tools;
})()

//---------------------parent------------------------
/*;(function () {
	function Parent (options) {
		options = options || {};
		this.width = options.width || 20;
		this.height = options.height || 20;
	}
	Parent.prototype.test = function () {
		console.log('test');
	}
	window.Parent = Parent;
})()*/

//-------------------food---------------------------
;(function () {
	var position = 'absolute';
	var elements = [];
	function Food(options) {
		options = options || {};
		this.width = options.width || 20;
		this.height = options.height || 20;
		// Parent.call(this, options);
		this.backgroundColor = options.backgroundColor || 'green';
		this.x = options.x || 0;
		this.y = options.y || 0;
	}
	/*Food.prototype = new Parent();
	Food.prototype.constructor = Food;*/

	Food.prototype.render = function (map) {
		remove();
		var div = document.createElement('div');
		map.appendChild(div);
		elements.push(div);
		this.x = Tools.getRandom(0, map.offsetWidth / this.width - 1) * this.width;
		this.y = Tools.getRandom(0, map.offsetHeight / this.height -1) * this.height;
		div.style.width = this.width + 'px';
		div.style.height = this.height + 'px'
		div.style.backgroundColor = this.backgroundColor;
		div.style.left = this.x + 'px';
		div.style.top = this.y + 'px';
		div.style.position = position;
	}

	function remove() {
		for (var i = elements.length - 1; i >= 0; i--) {
			elements[i].parentNode.removeChild(elements[i]);
			elements.splice(i, 1);
		}
	}
	window.Food = Food;
})()
//-------------------------------Snake-----------------------------
;(function () {
	var position = 'absolute';
	var elements = [];
	function Snake(options) {
		options = options || {};
		this.width = options.width || 20;
		this.height = options.height || 20;
		// Parent.call(this, options);
		this.direction = options.direction || 'right';
		this.body = [
			{x: 3, y: 2, color: 'red'},
			{x: 2, y: 2, color: 'blue'},
			{x: 1, y: 2, color: 'blue'}
		];
	}
	/*Snake.prototype = new Parent();
	Snake.prototype.constructor = Snake;*/
	Snake.prototype.render = function (map) {
		remove();
		for (var i = 0, len = this.body.length; i < len; i++) {
			var object = this.body[i];
			var div = document.createElement('div');
			map.appendChild(div);
			elements.push(div);
			div.style.width = this.width + 'px';
			div.style.height = this.height + 'px';
			div.style.direction = this.direction;
			div.style.position = position;
			div.style.left = object.x * this.width +'px';
			div.style.top = object.y * this.height + 'px';
			div.style.backgroundColor = object.color;
		}
	}
	function remove () {
		for (var i = elements.length - 1; i >= 0; i--) {
			elements[i].parentNode.removeChild(elements[i]);
			elements.splice(i, 1);
		}
	}
	Snake.prototype.move = function (food, map) {
		for (var i = this.body.length - 1; i > 0; i--) {
			// 让当前蛇节 处于上一个蛇节的位置
			this.body[i].x = this.body[i - 1].x;
			this.body[i].y = this.body[i - 1].y;
			}
			// 判断蛇头移动的方向
			var head = this.body[0];
			switch(this.direction) {
				case 'right':
					head.x += 1;
					break;
				case 'left':
					head.x -= 1;
					break;
				case 'top':
					head.y -= 1;
					break;
				case 'bottom':
					head.y += 1;
					break;
			}
			var headX = head.x * this.width;
			var headY = head.y * this.height;
			if (headX === food.x && headY === food.y) {
				var last = this.body[this.body.length - 1];
				var obj = {};
				/*this.body.push({
					x: last.x,
					y: last.y,
					color: last.color
				});*/
				extend(last, obj);
				console.log(obj);
				this.body.push(obj);
				food.render(map);
			}
	}
	function extend(parent, child) {
		for (var key in parent) {
			if (child[key]) {
				continue;
			}
			child[key] = parent[key];
		}
	}

	window.Snake = Snake;
})()

//-----------------------------------game-------------------------------------
;(function () {
	var that;
	function Game (map) {
		this.food = new Food();
		this.snake = new Snake();
		this.map = map;
		that = this;
	}
	Game.prototype.start = function () {
		this.food.render(this.map);
		this.snake.render(this.map);
		runSnack ();
		bindKey();
	}

	function runSnack () {
		var timeId = setInterval(function () {
			this.snake.move(this.food, this.map);
			this.snake.render(this.map);

			var maxX = this.map.offsetWidth / this.snake.width - 1;
			var maxY = this.map.offsetHeight / this.snake.height - 1;
			var x = this.snake.body[0].x;
			var y = this.snake.body[0].y;
			if (x > maxX || x < 0) {
				alert('Game Over!');
				clearInterval(timeId);
			}
			if (y < 0 || y > maxY) {
				alert('Game Over!');
				clearInterval(timeId);
			}
		}.bind(that), 150)
	}
	function bindKey () {
		document.addEventListener('keydown',function (e) {
			
			switch(e.keyCode) {
				// 上 38
				case 38:
					this.snake.direction = 'top';
					break;
				// 下 40
				case 40:
					this.snake.direction = 'bottom';
					break;
				// 左 37
				case 37:
					this.snake.direction = 'left';
					break;
				// 右 39
				case 39:
					this.snake.direction = 'right';
					break;
			}			
		}.bind(that), false);
	}

	window.Game = Game;
})()
//------------------------------调用-------------------------------------
;(function () {
	var map = document.getElementById('map');
	var game = new Game(map);
	game.start();
})()
